import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
import News from '../News'
import Index from '../Index'
import './index.css'
import HouseList from '../HouseList';
import Profile from '../Profile';

// import { Redirect } from 'react-router-dom/cjs/react-router-dom.min';

const tabItems = [
    {
      title: '首页',
      icon: 'icon-ind',
      path: '/home'
    },
    {
      title: '找房',
      icon: 'icon-findHouse',
      path: '/home/list'
    },
    {
      title: '资讯',
      icon: 'icon-infom',
      path: '/home/news'
    },
    {
      title: '我的',
      icon: 'icon-my',
      path: '/home/profile'
    }
  ]

export default class Home extends Component {
    state = {
        //默认控制选择菜单
        selectedTab: this.props.location.pathname,
        //用于控制tabBar可否隐藏。这个值应该是false，也就是不隐藏
        
        };

        //更新的时候，实现路由切换，组件并未重新加载的情况，实现高亮
        componentDidUpdate(preProps){
          if(preProps.location.pathname !== this.props.location.pathname){
              //此时，就说明路由发生切换了
              this.setState({
                  selectedTab: this.props.location.pathname
              })
          }
        }
    
    //渲染 TabBar.Item
    renderTabBarItem() {
        return tabItems.map(item => (
          <TabBar.Item
            title={item.title}
            key={item.title}
            icon={<i className={`iconfont ${item.icon}`} />}
            selectedIcon={<i className={`iconfont ${item.icon}`} />}
            selected={this.state.selectedTab === item.path}
            onPress={() => {
              this.setState({
                selectedTab: item.path
              })
    
              // 路由切换
              this.props.history.push(item.path)
            }}
          />
        ))
      }
    
       

    render() {
        return (
            <div className='home'>
                <Route path="/home/news" component={News} />
                <Route exact path="/home" component={Index} />
                <Route path="/home/list" component={HouseList} />
                <Route path="/home/profile" component={Profile} />

                {/* TabBar */}
                    <TabBar tintColor="#21b97a" barTintColor="white" noRenderContent={true}>
                        {this.renderTabBarItem()}
                    </TabBar>
                </div>
        )
    }
}
    